<template>
	<view class="add">
		<view class="erweima">
			<view class="listtop">
				<label class="iconfont icon-alipay"></label>
				<text>支付宝支付</text>
			</view>
			<view class="middle">
				  <view class="tui-upload-item" v-for="(item,index) in files" :key="index">
				  <image :src="item" class='tui-upload-img' @tap="previewImage" mode="aspectFill" :id="item"></image>
				  <tui-icon color="#ed3f14" :size="24" name="close-fill" class="tui-upload-del" :index="index" @click="deleteImage"></tui-icon>
				</view>
				<image v-if="files.length == 0" src="../../../static/images/icon/greyewm.png"></image>
			</view>
			<view class="bottom">
				 <view class="tui-upload-item tui-upload-add" v-if="files.length < 2" hover-class="tui-opcity" :hover-stay-time="150" @tap="chooseImage">
				  <text>+上传支付宝二维码</text>
				</view>
			</view>
			
		</view>
		<view class="tip">
			二维码获取：打开支付宝app,在首页打开收钱，在打开的个人收钱二维码下点击保存图片即可。直接拍照二维码上传，无法显示二维码!
		</view>
		<view class="box">
			<view class="item">
				<view>支付宝昵称 |</view>
				<view>
					<input type="text" />
				</view>
			</view>
			<view class="item">
				<view>支付宝账号 |</view>
				<view>
					<input type="text" />
				</view>
			</view>
		</view>
		<view class="tip1">
			<view>请核对二维码信息</view>
			<view>上传后点击【确认二维码】</view>
		</view>
		<view class="tijiao">确认二维码</view>
	</view>
</template>

<script>
		import tuiIcon from "@/components/icon/icon"
	export default {
		components: {
			tuiIcon,
			
		},
		data() {
			return {
				 files: [] //最多上传9张图片
			}
		},
		methods: {
			 chooseImage: function (e) {
					let that = this;
					if (that.files.length >=1) {
						this.tui.toast("最多上传1张图片");
						return
					}
					wx.chooseImage({
						count: 9 - that.files.length,
						sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
						success: function (res) {
							// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
							that.files=that.files.concat(res.tempFilePaths)
							//上传功能已去除
							//...
						}
					})
				},
				previewImage: function (e) {
					uni.previewImage({
						current: e.currentTarget.id, // 当前显示图片的http链接
						urls: this.files // 需要预览的图片http链接列表
					})
				},
				deleteImage: function (e) {
					const index = e.index;
					this.files.splice(index, 1);
				}
		}
	}
</script>
<style lang="scss" scoped src="./index.scss"></style>
